<template>
    <!--      弹幕      -->
    <div id="barrage-box"></div>
</template>

<script>
let timer = null;
export default {
    name: "BarrageCom",
    data() {
        return {

        }
    },
    methods: {
        addBarrageList(val,i) {
            let word = val;
            let span = document.createElement('span');
            let top = 6;
            let color1 = parseInt(Math.random() * 256);
            let color2 = parseInt(Math.random() * 256);
            let color3 = parseInt(Math.random() * 256);
            let color = "rgb(" + color1 + "," + color2 + "," + color3 + ")";
            span.style.position = 'absolute';
            span.style.top = top + "px";
            span.style.color = '#333';
            span.style.left = 250 * i +  'px';
            span.style.whiteSpace = 'nowrap';
            let nub = 1;
            span.setAttribute('speed', nub);
            span.speed = nub;
            span.innerHTML = word;
            document.getElementById('barrage-box').appendChild(span);
        },
        moves() {
            let spanArray =document.getElementById('barrage-box').children;
            for (let i = 0; i < spanArray.length; i++) {
                let spanLeft = parseInt(spanArray[i].style.left) - spanArray[i].speed + 'px';
                let left = parseInt(spanArray[i].style.left);
                if (left < -(parseInt(spanArray[i].clientWidth))) {
                    if (i === 0) {
                        spanArray[i].style.left = parseInt(spanArray[spanArray.length - 1].style.left) + 250  + 'px';
                        spanArray[i].innerHTML = this.createBarrageList();
                    }else {
                        spanArray[i].style.left = parseInt(spanArray[i-1].style.left) + 250 + 'px';
                        spanArray[i].innerHTML = this.createBarrageList();
                    }
                }else {
                    spanArray[i].style.left = spanLeft;
                }
            }
        },
        createBarrageList() {
            let prefix = '恭喜' +  6;
            let middle = '****';
            let desinfo = '';
            let suffix = parseInt(Math.random()*1000);

            if (suffix.toString().length < 3) {
                return this.createBarrageList();
            }
            let sum = parseInt(Math.random()*10);
            if (sum === 0 || sum > 5) {
                sum = 5;
            }
            if (parseInt(Math.random()*10) % 2 === 0) {
                desinfo = `抽獎獲得立減 ${sum}元`;
            }else {
                desinfo = `抽獎獲得集金幣 ${sum}`;
            }
            return prefix + middle + suffix + desinfo
        },
        startBarrageList() {
            for (let i = 0; i < 3; i++) {
                this.addBarrageList(this.createBarrageList(),i+1)
            }
            timer = setInterval(this.moves,40);
        },
        removeTime() {
          clearInterval(timer);
          timer = null;
        }
    },
    beforeDestroy() {
        clearInterval(timer);
        timer = null;
    }
}
</script>

<style scoped lang="scss">
#barrage-box {
    overflow: hidden;
    font-size: 12px;
    margin: 0 auto;
    position: relative;
    width: 237px;
    display: block;
    height: 28px;
}
</style>